<template>
    <div>
        <!--列表start --222s-->
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            @selection-change="handleSelectionChange"
            border
        >
            <el-table-column type="selection" width="50" fixed/>
            <el-table-column label="用户 ID" prop="userid" width="80" align="center"/>

            <el-table-column label="头像" prop="userpic" align="center" width="200">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.userpic" placement="right" trigger="hover">
                        <img :src="scope.row.userpic" style="width:400px;border-radius:3px;">
                        <img
                            slot="reference"
                            :src="scope.row.userpic"
                            style="max-height: 80px;max-width: 50px;border-radius:5px;"
                        >
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>


            <el-table-column label="用户昵称" prop="usernick" align="center"/>

            <el-table-column label="手机号码" prop="usermobile" align="center"/>


            <el-table-column label="建立关系时间" with="300" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.createtime!=null"></i>
                    <span
                        v-if="scope.row.createtime!=null"
                    >{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                    <span v-else>无</span>
                </template>
            </el-table-column>

            <el-table-column label="好友数量" prop="countfriend" align="center">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">

                    <el-button
                        type="danger"
                        size="mini"
                        @click.native="handleDel(scope.row.userid)"
                    >解绑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->

        <!--全选删除start-->
        <div class="left-container">
            <el-button type="danger" size="small" @click="delGroup()">解绑已选</el-button>
            <transition name="el-fade-in-linear">
                <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
            </transition>
        </div>
        <!--全选删除end-->

        <!--分页模块start-->
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :current-page="query.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--分页模块end-->

    </div>
</template>
<script>
    import {getFriendList,untyingFriend} from "../../api/mbuser/mbuser";

    export default {
        data() {

            return {

                query: {//查询条件
                    userid:"",
                    content:"",
                    startTime: "",
                    endTime: "",
                    currentPage: 1,
                    pageSize: 10,
                },

                userid:"",
                list: [],//列表集合
                totalNumber: 0,//分页总页数
                loading: true,//列表加载
                allLoding: false,//全屏加载
                formSumbitLoding: false,//表单提交加载
                cancelToggle: false,//列表是否全选
                multipleSelection: [], //多选集合

            };
        },
        methods: {

            /*获取列表事件*/
            getList() {
                this.loading = true;
                getFriendList(this.query).then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }

                    this.list = response.data.list || [];
                    if(this.list.length>0) {
                        let mylist=this.list
                        for(var i=0;i< mylist.length;i++){
                            mylist[i].userban= mylist[i].userban.toString();
                        }
                        this.list=mylist
                    }

                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                }).catch(() => {
                    this.loading = false;
                    this.list = [];
                })
            },

            /*列表查询条件事件*/
            onSubmit() {
                this.query.currentPage = 1;
                this.$router.push({
                    path: "",
                    query: this.query
                });
                this.getList();
            },

            /*刷新*/
            onRest() {
                this.$router.push({
                    path: ""
                });
                //刷新事件需要重置查询条件
                this.createTime = [];
                this.query = {
                    currentPage: 1,
                    pageSize: 10,
                };
                this.getList();
            },

            /*点击页数*/
            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getList();
            },

            /*选择每页条数【10,20,30,40,50】*/
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },

            /*取消全选事件*/
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            /*列表复选框选择事件*/
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },

            /*全选删除事件*/
            delGroup() {
                console.log(this.multipleSelection)
                var ids = this.multipleSelection.map(item => item.userid).join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },

            /*单击删除事件*/
            handleDel(ids) {
                if (ids) {
                    this.$confirm("确认要删除吗?", "提示", {
                        type: "warning"
                    })
                        .then(() => {

                            this.loading = true;
                            var params = new URLSearchParams();
                            params.append("ids", ids);
                            params.append("pid", this.query.userid);
                            untyingFriend(params)
                                .then(response => {
                                    this.loading = false;
                                    if (response.code) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.$message.success("删除成功");
                                    // 刷新数据
                                    //this.list.splice(index, 1);
                                    this.getList();
                                })
                                .catch(() => {
                                    this.loading = false;
                                });
                        })
                        .catch(() => {
                            this.$message.warning("已取消");
                        });
                }
            },

        },
        created() {
            this.query.userid=this.$route.query.uid;
          //  alert("+"+this.userid);
            this.getList();
        }
    }
    //跳转路由的方法
    // this.$router.push({
    //     path: "",
    //     query:{
    //         username:"张三"
    //     }
    // });
    //接受路由传递的参数
    //let query = this.$route.query;
</script>
